{% extends "index.html" %}
    <!--内容开始-->
    {% block content %}

        <div class="search-group">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#total" data-toggle="tab">分段统计</a></li>
                <li><a href="#pass" data-toggle="tab">及格情况</a></li>
                <li><a href="#total2" data-toggle="tab">总分</a></li>
                <li><a href="#choice" data-toggle="tab">选择</a></li>
                <li><a href="#blank" data-toggle="tab">填空</a></li>
                <li><a href="#q17" data-toggle="tab">17</a></li>
                <li><a href="#q18" data-toggle="tab">18</a></li>
                <li><a href="#q19" data-toggle="tab">19</a></li>
                <li><a href="#q20" data-toggle="tab">20</a></li>
                <li><a href="#q21" data-toggle="tab">21</a></li>
                <li><a href="#q22" data-toggle="tab">22</a></li>
                <li><a href="#q23" data-toggle="tab">23</a></li>
                <li><a href="#q24" data-toggle="tab">24</a></li>
                <li><a href="#q25" data-toggle="tab">25</a></li>
                <li><a href="#q26" data-toggle="tab">26</a></li>
                <li><a href="#q27" data-toggle="tab">27</a></li>
            </ul>

            <!--<p>{{choice}}</p>-->

            <div id="myTabContent" class="tab-content">
                <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
                <div id="total" class="charts tab-pane fade in active">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart1 = echarts.init(document.getElementById('total'));

                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '学生总成绩分段统计图'
                            },
                            tooltip: {},
                            legend: {
                                data:['人数']
                            },
                            xAxis: {
                                data: ["0-10分","11-20分","21-30分","31-40分","41-50分",
                                    "51-60分","61-70分","71-80分","81-90分","91-100分"]
                            },
                            yAxis: {},
                            series: [{
                                name: '人数',
                                type: 'bar',
                                data: {{ res }}
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart1.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="pass" >
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart16 = echarts.init(document.getElementById('pass'));

                        // 指定图表的配置项和数据
                        var option = {
                            title : {
                                text: '该课程及格情况统计',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c}人 ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['及格','不及格']
                            },
                            series : [
                                {
                                    name: '及格情况',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    data:{{ pie|safe }},
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                        }
                        ]
                        };


                        // 使用刚指定的配置项和数据显示图表。
                        myChart16.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="total2" >
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart15 = echarts.init(document.getElementById('total2'));

                        option = {
                            title: {
                                text: '总成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            },
                            yAxis: {
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                },
                                scale: true
                            },
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ total2|safe }},
                        type: 'scatter'
                        }]
                        };


                        // 使用刚指定的配置项和数据显示图表。
                        myChart15.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="choice" >
                    <script type="text/javascript">
                            // 基于准备好的dom，初始化echarts实例
                            var myChart2 = echarts.init(document.getElementById('choice'));

                            option = {
                                title: {
                                    text: '选择题成绩分布图'
                                },
                                tooltip: {}, <!-- 鼠标悬停显示数据 -->
                                legend: {
                                    data:['成绩']
                                },
                                xAxis: {},
                                yAxis: {},
                                series: [{
                                    symbolSize: 5,
                                    name:'成绩',
                                    data: {{ choice|safe }},
                                    type: 'scatter'
                                }]
                            };


                            // 使用刚指定的配置项和数据显示图表。
                            myChart2.setOption(option);
                        </script>
                </div>
                <div class="charts tab-pane fade in active" id="blank">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart3 = echarts.init(document.getElementById('blank'));

                        option = {
                            title: {
                                text: '填空题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ blank|safe }},
                                type: 'scatter'
                            }]
                            };


                        // 使用刚指定的配置项和数据显示图表。
                        myChart3.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q17">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart4 = echarts.init(document.getElementById('q17'));

                        option = {
                            title: {
                                text: '第17题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q17|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart4.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q18">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart5 = echarts.init(document.getElementById('q18'));

                        option = {
                            title: {
                                text: '第18题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q18|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart5.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q19">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart6 = echarts.init(document.getElementById('q19'));

                        option = {
                            title: {
                                text: '第19题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q19|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart6.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q20">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart7 = echarts.init(document.getElementById('q20'));

                        option = {
                            title: {
                                text: '第20题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q20|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart7.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q21">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart8 = echarts.init(document.getElementById('q21'));

                        option = {
                            title: {
                                text: '第21题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q21|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart8.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q22">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart9 = echarts.init(document.getElementById('q22'));

                        option = {
                            title: {
                                text: '第22题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q22|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart9.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q23">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart10 = echarts.init(document.getElementById('q23'));

                        option = {
                            title: {
                                text: '第23题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q23|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart10.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q24">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart11 = echarts.init(document.getElementById('q24'));

                        option = {
                            title: {
                                text: '第24题成绩分布图'
                            },
                            legend: {
                                data:['成绩']
                            },
                            tooltip: {},
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q24|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart11.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q25">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart12 = echarts.init(document.getElementById('q25'));

                        option = {
                            title: {
                                text: '第25题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q25|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart12.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q26">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart13 = echarts.init(document.getElementById('q26'));

                        option = {
                            title: {
                                text: '第26题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q26|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart13.setOption(option);
                    </script>
                </div>
                <div class="charts tab-pane fade in active" id="q27">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart14 = echarts.init(document.getElementById('q27'));

                        option = {
                            title: {
                                text: '第27题成绩分布图'
                            },
                            tooltip: {},
                            legend: {
                                data:['成绩']
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                symbolSize: 5,
                                name:'成绩',
                                data: {{ q27|safe }},
                        type: 'scatter'
                        }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart14.setOption(option);
                    </script>
                </div>

            </div>

        </div>



    {% endblock %}
    <!--内容结束-->
